<#setting classic_compatible=true>
<#assign base=request.contextPath />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="../images/favicon.ico" type="image/ico" />

    <title>消息队列接入</title>

    <!-- 引入通用css和js -->
	<#include "/common/commoncss.ftl">
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/bootstrap-table.min.css">
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/queue/queueAccess.css">
	<!-- 引入通用css -->
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/model.css" > 
	
	<style type="text/css">
		/* 输入框样式 */
		.inputbox {
		    width: 227px !important;
		    height: 40px !important;
		    margin-left: 8px !important;
		    border: 1px solid #ddd !important;
		    border-radius: 4px !important;
		    padding: 6px 12px !important;
		}
		/* valid 校验样式 */
		.error{
			margin-left: 6px!important;
		}
		
		/* 删除目标应用按钮 */
		.delTar {
			width:100px;
			float: left;
			margin-top: 10px;
			cursor: pointer;
		}
		
		/* 每个应用div样式 */
		.appConf {
			width: 130px; 
			/* height: 150px; */
			/* border: 1px solid #f2f2f2;  */
			text-align: center;
			margin-bottom: 34px;
		}
		/* 图标样式 */
		.icon {
			width: 50px; 
			height: 50px;
			line-height: 50px; 
			margin: auto 0;
			margin-bottom: 23px;
			margin-top: 10px;
		}
		/* 图标下方按钮 */
		.iconBtn {
			background: #AEB8C1;/* 浅蓝 #3B9ED9 */
			color: #fff;
			margin: 0;
			white-space: normal;
		}
		.iconBtn:hover {
			background-color: #AEB8C1;/* 深蓝 #1C76B4 */
			color: #fff;
		}
		.iconBtn:focus {
			background-color: #AEB8C1;
			color: #fff;
		}
		
    </style>
  </head>

<body class="nav-md">
  	

     


 
       		<div class="body-content" style="padding-top: 1%;">
       			
				<div>
					<p>&nbsp;&nbsp;主题队列管理&nbsp;<i class="glyphicon glyphicon-chevron-right"></i>&nbsp;查看单条主题队列</p>
				</div>
				
	       		<div style="width: 100%;">
					<div class="panel panel-default" >
						<!-- 头部 -->
						<!-- <div class="panel-heading">
							<h5>&nbsp;&nbsp;主题队列管理&nbsp;<i class="glyphicon glyphicon-chevron-right"></i>&nbsp;新增消息队列接入</h5>
						</div> -->
						
						<!-- 内容 -->
						<div class="panel-body" style="min-width:1077px;">
			            	<form  id="queueForm" class=" form-horizontal">
				                <div class="form-group">
				                    <span>主题队列名称：</label>
				                    <span>${topicQueueName!''}</span>
				                </div>
				                
				               <!--  <div class="form-group">
				                    <label for="topicEmail" class="col-sm-2 control-label" style="width: 110px;">E-Mail</label>
				                    <div class="col-sm-4">
				                    	<input class="form-control" id="topicEmail" name="topicEmail" >
				                    </div>
				                </div> -->
	            			</form>
	            			
	            			<!-- 链条图 -->
	            			<div class="chain">
		            			<div class="chainContent">
		            				<div style="position: relative;width:50%;float: left;">
			            				<!-- 源应用 -->
			            				<div class="appConf" style="float: left;">
		            						<p style="">源应用配置</p>
		            						<!-- 防止先选目标应用 -->
			            					<#if map?? && map.origin??>
							                	<div style="width: 100%; ">
			            							<img src="${base}/zhgl-jzstyxx-manage/images/queueIcon/selectzhgl-jzstyxx-manage_site.png" class="icon" aria-hidden="true">
							                	</div>
					            				<button type="button" class="btn iconBtn" style="background: #1C76B4;" onclick="checkOriginApp()" value="${map.origin.originId!}">
								                    	${map.origin.originName!}
								                </button>
			            					<#else>
							                	<div style="width: 100%; ">
			            							<img src="${base}/zhgl-jzstyxx-manage/images/queueIcon/selectzhgl-jzstyxx-manage_gray.png" class="icon" aria-hidden="true">
							                	</div>
					            				<button type="button" class="btn iconBtn" onclick="checkOriginApp()">
								                    	选择应用系统
								                </button>
								            </#if>
				            							
			            				</div>
			            				<!-- 虚线 -->
			            				<div class="oneLine" style="width: 48%;">
						                	<hr class="hrs"></hr>
						                </div>
			            				<!-- 队列 -->
			            				<div class="appConf" style="float: left;">
		            						<p style="">队列</p>
	            							<#if map.origin?? && targetNum?? && (targetNum >0) >
			            						<img src="${base}/zhgl-jzstyxx-manage/images/queueIcon/queue_blue.png" class="icon" aria-hidden="true">
	            							<#else>
			            						<img src="${base}/zhgl-jzstyxx-manage/images/queueIcon/queue_gray.png" class="icon" aria-hidden="true">
	            							</#if>
			            				</div>
		            				</div>
		            				
		            				
		            				<div style="position: relative;width:50%;float: right;">
		            					<!-- 虚线 -->
		            					<div style="position: relative;width:50%;float: left;">
			            					<!-- 长水平虚线（右框） -->
						                	<hr class="hrs" style="margin-top: 65px;"></hr>
						                	
						                	
						                	<!-- 增加多条组合虚线 -->
						                	<div class="imageLines" id="dasheds" style="position: relative;width:50%;float: right;">
				            					<#assign n =0 />
						                		<#if targetNum?? && (targetNum > 1) >
						                			<#list targetList as item>
				            							<#assign n = n+1 />
				            							<#if n gt 1 >
				            								<div id="tarApp${n-1}">
							            						<div class="hrsVerDiv">
														    		<hr class="hrsVertical"></hr>
														    	</div>
														    	<hr class="shortHrs"></hr>
														    </div>
				            							</#if>
				            						</#list>
				            					</#if>
						                	</div>
						                	
		            					</div>
		            					
		            					<!-- 目标应用配置  -->
		            					<div style="position: relative;width:50%;float: right;">
				            				<!-- 目标应用配置1 -->
		            							
		            							<#if targetNum?? && (targetNum gt 0) >
						            				<div class="appConf" style="float: left;">
				            							<p >目标应用配置</p>
									                	<div style="width: 100%; ">
					            							<img src="${base}/zhgl-jzstyxx-manage/images/queueIcon/selectzhgl-jzstyxx-manage_site.png" class="icon" aria-hidden="true">
									                	</div>
							            				<button type="button" class="btn iconBtn" style="background: #1C76B4;" onclick="checkTargetApp(this.value,0)" value="${map.targetList[0].targetId!}">
										                    	${map.targetList[0].targetName!}
										                </button>
											        </div>
						            				<div class="delTar" style="margin-top: 39px;">
						            					<img height="20px;" width="20px;" src="${base}/zhgl-jzstyxx-manage/images/red-del.png" alt="删除"  onclick="delTarApp(0)"/>
						            				</div>
				            					<#else>
						            				<div class="appConf" style="float: left;">
				            							<p >目标应用配置</p>
									                	<div style="width: 100%; ">
					            							<img id="tApp" src="${base}/zhgl-jzstyxx-manage/images/queueIcon/selectzhgl-jzstyxx-manage_gray.png" class="icon" aria-hidden="true">										
					            						</div>
							            				<button id="tBtn" type="button" class="btn iconBtn" onclick="checkTargetApp1()">
									                    	选择应用系统
										                </button>
										        	</div>
									            </#if>
				            				
				            				<!-- 目标应用配置集合 -->
				            				<div id="targetAppList">
				            					<#assign n =0 />
		            							<#if targetNum?? && (targetNum gt 1) >
				            						<#list targetList as item>
				            							<#assign n = n+1 />
				            							<#if n gt 1 >
				            								<div id="targetApp${n-1}">
							            						<div class="appConf "style="float: left;" value="${(n-1)!}">
												                	<div style="width: 100%; ">
								            							<img src="${base}/zhgl-jzstyxx-manage/images/queueIcon/selectzhgl-jzstyxx-manage_site.png" class="icon" aria-hidden="true">
												                	</div>
										            				<button type="button" class="btn iconBtn" style="background: #1C76B4;" onclick="checkTargetApp(this.value,${(n-1)!})" value="${item.targetId!}">
													                    	${item.targetName!}
												            	    </button>
																</div>
									            				<div class="delTar">
									            					<img height="20px;" width="20px;" src="${base}/zhgl-jzstyxx-manage/images/red-del.png" alt="删除" onclick="delTarApp('${(n-1)!}')"/>
									            				</div>
				            								</div>
				            							</#if>
				            						</#list>
				            					</#if>
				            				</div>
				            				
						                	<!-- 新增目标应用 -->
				            				<div class="appConf ">
				            					<button type="button" class="btn iconBtn" style="background: #1C76B4;" onclick="addTargetApp()" >
				            						新增目标应用
								                </button>
						                	</div>
						                	
		            					</div>
		            					
		            				
		            				</div>
		            				
		            					
		            				
		            				<!-- <div class="hrsVerDiv">
					                	<hr class="hrsVertical"></hr>
		            				</div> -->
		            			</div>
	            			</div>
	            			
	            			
						</div>
		            			
		            			
		            			
					                <!-- 蓝线 
					                <hr class="hrs" style="border-top: 2px dashed #1C76B4;"></hr> -->
						
						<div class="panel-footer" style="background: #fff;text-align: center;">
							
			                <button type="button" onclick="backQueue()" class="btn btn-default two-word-btn"
			                	style="background: #3E8F4D;color: #fff;">返回
			                </button>
			                
						</div>
						
						
						
					</div>
	       		</div>
       		
       		
			</div>



	
	<#include "/common/commonjs.ftl">
	<!--<script src="${base}/zhgl-jzstyxx-manage/js/login/jquery.cookie.js"></script>-->
	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/jquery.validate.min.js"></script>
	<!-- 页面js -->
	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/queue/checkQueue.js"></script>
	
	<script type="text/javascript">
		var tId = "${tId!''}";
		console.log("队列的id主键: ", tId);
		
	    
	</script>
	
	
	
	
  </body>
</html>